<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <span @click="fn.back()" class="mui-action-back"
        ><img class="back-btn" src="../../../static/images/back.png"
      /></span>
      <h1 class="mui-title">党费缴纳信息</h1>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="statistics-header">
            <div class="time-line flex-center">
              <div class="message-line"></div>
              <div
                @click="showTimePicker()"
                id="recordYyear"
                class="year-btn flex-center"
              >
                <span id="recordTimes">{{ year }}</span
                >年
                <img
                  class="arrow_icon"
                  src="../../../static/images/select_down.png"
                />
              </div>
              <div class="message-line"></div>
            </div>
            <div class="flex-center">
              <div class="flex-center work-message-item-tab">
                <div class="flex-column flex-center">
                  <p>应交党费</p>
                  <p class="work-red">￥{{ shouldPay }}</p>
                </div>
              </div>
              <div class="flex-center work-message-item-tab">
                <div class="flex-column flex-center">
                  <p>已交党费</p>
                  <p class="work-blue">￥{{ realPay }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="record-member-lists">
            <div class="flex-between-center work-message-lists">
              <ul class="flex-justify-start sign-lists">
                <li
                  @click="switchTabIndex(1)"
                  :class="{ 'sign-active': tabIndex == 1 }"
                  class=""
                >
                  党费缴纳历史记录
                </li>
                <li
                  @click="switchTabIndex(2)"
                  :class="{ 'sign-active': tabIndex == 2 }"
                  class=""
                >
                  历史待缴
                </li>
              </ul>
            </div>
            <div
              v-if="tabIndex == 1"
              class="sign-lists-tabs"
              style="display: block"
            >
              <div class="mui-table-view organization-lists">
                <div class="mui-table-view organization-lists">
                  <div class="mui-table-view organization-lists">
                    <div class="organization-lists pay-scroll">
                      <cube-scroll
                        ref="scroll"
                        :options="options"
                        @pulling-up="onPullingUp"
                      >
                        <cube-swipe>
                          <transition-group name="swipe" tag="div">
                            <div
                              class="mui-table-view-cell"
                              v-for="(data, index) in swipeData"
                              :key="data.month"
                            >
                              <li class="mui-table-view-cell">
                                <div class="flex-between-center">
                                  <p>{{ data.month }}月</p>
                                  <p v-if="data.shouldPay === data.realPay">
                                    已缴费
                                  </p>
                                </div>
                                <div
                                  class="schedule-item-world flex-between-center"
                                >
                                  <p
                                    class="organization-lists-title mine-lists-content"
                                  >
                                    应缴党费：￥{{
                                      data.shouldPay
                                    }}，实缴党费：￥{{ data.realPay }}
                                  </p>
                                  <div
                                    v-if="data.shouldPay > data.realPay"
                                    class="red-btn"
                                    @click="goOnlinePayment(data)"
                                  >
                                    去缴费
                                  </div>
                                </div>
                              </li>
                            </div>
                          </transition-group>
                        </cube-swipe>
                        <!-- <div
                          class="text-center no-data"
                          v-if="swipeData.length === 0"
                        >
                          <img
                            src="../../../static/images/no_data.png"
                            alt=""
                          />
                          <p>暂无数据</p>
                        </div> -->
                        <!-- W noData -->
                        <noData v-if="swipeData.length === 0"></noData>
                        <onBottom v-else-if="onBottom"></onBottom>
                      </cube-scroll>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="tabIndex == 2"
              class="sign-lists-tabs"
              style="display: block"
            >
              <div class="mui-table-view organization-lists">
                <div class="mui-table-view organization-lists">
                  <div class="mui-table-view organization-lists">
                    <div class="organization-lists pay-scroll">
                      <cube-scroll
                        ref="scroll"
                        :options="options"
                        @pulling-up="onPullingUp"
                      >
                        <cube-swipe>
                          <transition-group name="swipe" tag="div">
                            <div
                              class="mui-table-view-cell"
                              v-for="(data, index) in swipeData"
                              :key="data.month"
                            >
                              <li class="mui-table-view-cell">
                                <div class="flex-between-center">
                                  <p>{{ data.month }}月</p>
                                  <p v-if="data.shouldPay === data.realPay">
                                    已缴费
                                  </p>
                                </div>
                                <div
                                  class="schedule-item-world flex-between-center"
                                >
                                  <p
                                    class="organization-lists-title mine-lists-content"
                                  >
                                    应缴党费：￥{{
                                      data.shouldPay
                                    }}，实缴党费：￥{{ data.realPay }}
                                  </p>
                                  <div
                                    v-if="data.shouldPay > data.realPay"
                                    class="red-btn"
                                    @click="goOnlinePayment(data)"
                                  >
                                    去缴费
                                  </div>
                                </div>
                              </li>
                            </div>
                          </transition-group>
                        </cube-swipe>
                        <!-- <div
                          class="text-center no-data"
                          v-if="swipeData.length === 0"
                        >
                          <img
                            src="../../../static/images/no_data.png"
                            alt=""
                          />
                          <p>暂无数据</p>
                        </div> -->
                        <!-- W noData -->
                        <noData v-if="swipeData.length === 0"></noData>
                        <onBottom v-else-if="onBottom"></onBottom>
                      </cube-scroll>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
export default {
  name: "payInfo",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      payStatus: "",
      year: new Date().getFullYear(),
      thisYear: new Date().getFullYear(),
      thisMonth: (new Date().getMonth() + 1 + "").padStart(2, "0"),
      thisMonthShouldPay: 0,
      shouldPay: 0,
      realPay: 0,
      tabIndex: 1,
      currentTabIndex: 1,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      let userInfo = this.$store.state.userInfo || {};
      let data = {
        pageIndex: this.pageIndex,
        pageSize: 20,
        partyMemberId: userInfo.partyMemberModel.id,
        payStatus: this.payStatus,
        year: this.year,
      };
      loginService.getUserPayDetail(data).then((res) => {
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        // 计算年度缴费情况
        if (this.tabIndex === 1) {
          this.shouldPay = 0;
          this.realPay = 0;
          this.swipeData.map((data) => {
            this.shouldPay = this.shouldPay + data.shouldPay;
            this.realPay = this.realPay + data.realPay;
          });
        }
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    showTimePicker() {
      if (!this.datePicker) {
        let me = this;
        let nowYear = new Date().getFullYear();
        this.datePicker = this.$createDatePicker({
          columnCount: 1,
          min: new Date(nowYear - 10, 1, 1),
          max: new Date(nowYear + 1, 1, 1),
          value: new Date(me.year, 1, 1),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.year = new Date(selectedTime).getFullYear();
            this.reloadData();
          },
        });
      }
      this.datePicker.show();
      setTimeout(() => {
        this.datePicker.$updateProps({
          value: new Date(this.year, 1, 1),
        });
      }, 1000);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.pageIndex = 0;
      this.swipeData = [];
      this.loadData();
    },
    getPay() {
      if (this.swipeData && this.swipeData.length > 0) {
        let data = this.swipeData[0];
        return data.shouldPay - data.realPay;
      } else {
        return 0;
      }
    },
    goOnlinePayment(data) {
      this.$store.state.onlinePayment = data;
      this.$router.push({ path: `/onlinePayment` });
    },
    switchTabIndex(tableIndex) {
      this.tabIndex = tableIndex;
      console.log("tableIndex=", tableIndex);
      if (tableIndex === 1) {
        this.payStatus = "";
      } else {
        this.payStatus = "0";
      }
      if (tableIndex !== this.currentTabIndex) {
        this.currentTabIndex = tableIndex;
        this.swipeData = [];
        this.pageIndex = 0;
        this.loadData();
      }
    },
  },
};
</script>

<style scoped>
.pay-scroll {
  height: calc(100vh - 350px);
}
</style>
